<template>
  <view class="student_manage">
    <view class="student_list">
      <view class="list" v-for="(item, index) in studentList" :key="index">
        <view class="student_info">
          <view class="avator">
            <image :src="item.avatar_url" mode="aspectFill" style="width: 100rpx; height: 100rpx; border-radius: 50%"></image>
          </view>
          <view class="info">
            <view class="student_name"
              >姓名：{{ item.name }}
              <!-- <u-icon @click="changeStudentInfo" name="edit-pen" color="#0DC160" size="25"></u-icon> -->
            </view>
            <view class="joined_class">昵称：{{ item.nickname }}</view>
            <view class="joined_class">性别：{{ item.gender == 'female' ? '女' : '男' }}</view>

            <!-- <view class="joined_class">已报课程：足球班、游泳班、网球班</view> -->
          </view>
        </view>
        <!-- 
        <view class="class_info">
          <view class="class_name">
            <view class="name">游泳班</view>
            <view class="edit"><u-icon name="edit_pen" color="#0DC160" size="18"></u-icon></view>
          </view>
          <view class="detail_info">
            <view class="info lh_38"> <u-icon size="25" name="clock"></u-icon>{{ item.start_time }} </view>
            <view class="info"> <u-icon size="25" name="map"></u-icon>{{ item.address }} </view>
            <view class="info"> <u-icon size="25" name="clock"></u-icon>{{ item.close_regist_time }} </view>
          </view>
        </view> -->

        <view class="more_class">
          <!-- <button class="btn" @click="moreClass">更多课程</button> -->
          <button class="btn" @click="selectStudent(item)">选择学员</button>
        </view>
      </view>
    </view>
    <!-- <view class="add_student">
      <button class="btn" @click="addStudent">添加学员</button>
    </view> -->
  </view>
</template>

<script>
import { getStudentList } from '@/api/class_share';
import Cache from '@/utils/cache';

export default {
  data() {
    return {
      studentList: [],
    };
  },
  methods: {
    moreClass() {
      // uni.navigateTo({
      //   url: `/pages/class_manage/index`,
      // });
    },
    addStudent() {
      // uni.navigateTo({
      //   url: `/pages/student_manage/add_student`,
      // });
    },
    changeStudentInfo() {
      // uni.navigateTo({
      //   url: `/pages/student_manage/add_student?id=1`,
      // });
    },
    getList() {
      getStudentList({ order: 'desc', page: 1, size: 50 }).then(res => {
        this.studentList = res.list;
      });
    },
    selectStudent(item) {
      Cache.set('STUDENTID', JSON.stringify({ id: item.id, name: item.name }));
      this.$u.toast('选择成功');
      uni.navigateTo({
        url: `/pages/initiate_class_share/index`,
      });
    },
  },
  onLoad() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.student_manage {
  background: #f8f8f8;
  padding: 24rpx;
  .student_list {
    overflow: auto;
    .list {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 32rpx 32rpx 24rpx 32rpx;
      margin-bottom: 32rpx;
      .student_info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .avator {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .info {
          flex: 1;
          .student_name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #010101;
            font-style: normal;
            margin-bottom: 24rpx;
            display: flex;
            justify-content: space-between;
          }
          .joined_class {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            font-style: normal;
          }
        }
      }
      .class_info {
        background: linear-gradient(180deg, #fbfffd 0%, #f5fff9 100%);
        border-radius: 8rpx;
        margin: 24rpx 0;
        padding: 24rpx;
        .class_name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #010101;
            font-style: normal;
          }
        }
        .detail_info {
          .info {
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            text-align: left;
            font-style: normal;
            margin-top: 16rpx;
          }
          .lh_38 {
            line-height: 38rpx;
          }
        }
      }
      .more_class {
        display: flex;
        justify-content: flex-end;
        .btn {
          width: 180rpx;
          height: 64rpx;
          text-align: center;
          line-height: 64rpx;
          background: #0dc160;
          border-radius: 32rpx;

          font-weight: 400;
          font-size: 26rpx;
          color: #ffffff;
        }
      }
    }
  }

  .add_student {
    width: 100%;
    .btn {
      height: 90rpx;
      margin: 0 32rpx;
      background: #0dc160;
      border-radius: 44rpx;

      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 90rpx;
      text-align: center;
    }
  }
}
</style>
